// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: root
    clip: true
    property int frame: 0
    property int frameCount: 2
    property int grid_x: 2
    property int grid_y: 1
    property alias source:image.source
    width:image.width/grid_x
    height: image.height/grid_y

    property int value: -1
    property string mast: "None" 
    opacity: 0.5

    Image{
        id: image
        x: -root.width*(frame%grid_x)
    }



    MouseArea{
        anchors.fill: root
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton
        onEntered: {
            root.frame = 1
        }
        onExited: {
            root.frame = 0
        }
        onClicked: { 
		state="invisible"
		//root.opacity=root.opacity<0.4?1:0.2

		}
    }

    states: [
	State {
		name: "invisible"
		PropertyChanges{ target: root; opacity: 0 }
		PropertyChanges{ target: root; y: -20}
	},
	State {
		name: "visible"
		PropertyChanges{ target: root; opacity: 1 }
		PropertyChanges{ target: root; y: 0 }
	}
    ]
    transitions: [
	Transition {
		
		to: "*"
		PropertyAnimation{ target: root; duration: 300; properties: "opacity" }
		PropertyAnimation{ target: root; duration: 700; properties: "y"; easing.type: Easing.OutCubic }
	}
    ]

    state: "invisible"

}
